<template>
  <div id='app'>
  <form action="/">
  <van-search
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
    ref="input"
  />
</form>
<div class="header">
  <span>历史搜索</span>
  <span><img src="/1c403fdea404f7176435ec982c7ed5d1.png" alt="" @click="remove"></span>
  </div>

  <ul class="uu">
    <li v-for="(c,i) in $store.state.list" :key="i" @click="zz(c.ojs)">{{c.ojs}}</li>
  </ul>

  </div>
</template>

<script>
export default {
  data () {
    return {
      list:[],
      list2:[],
      
       value: '',
    }
  },
  methods: {
onSearch(val) {
  this.value=val
  this.list=this.list2.filter((res)=>{
                  return res.title.includes(this.value)
              })
  if(this.list.length>0){
  this.$router.push({path:'/about',query:{val}})
    this.$store.commit('add',val)
    this.value=''
  }else{
    alert('没有此类数据')
    this.value=''

    return
  }

    },
    onCancel() {
      this.value=''
    },
    remove(){
  this.$store.commit('remove')
    
    },
     get(){
          this.$axioss.get('/list.json').then(res=>{
              this.list=res.data.result
              this.list2=res.data.result
          })
      },
      zz(name){
        this.value=name
        console.log(this.$refs.input.children[0].children[0].children[1].children[0].children[0].focus());
      }
  },
  mounted() {
    this.get()

  },
  components: {

  }
}
</script>

<style lang='scss' >
.header{
  display: flex;
  justify-content: space-between;
  margin:0 10px ;
  font-size: 14px;
  img{
    width: 20px;
    height: 20px;
  }
}
html,body{
  background-color: #F1F4F1;
}
.uu{
  display: flex;
  flex-wrap: wrap;
  li{
    margin: 5px 20px;
    height: 25px;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 10px;

  }
}

</style>
